<!--仓库表-->
<template>
    <div>
        <el-form :model="whform" ref="whformRef" inline="true" style="text-align: left;">
            <el-form-item label="仓库状态:" prop="status">
                <el-select v-model="whform.status" placeholder="请选择" style="width:190px">
                    <el-option label="启用" value="0"></el-option>
                    <el-option label="停用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="仓库:" prop="whname">
                <el-input v-model="whform.whname" placeholder="请输入仓库名称/编号"></el-input>
            </el-form-item>
            <el-form-item label="仓库部门:" prop="depId">
                <el-select 
                    v-model="whform.depId" 
                    placeholder="请选择"
                    style="width: 190px"
                    @change="handleDepartmentChange"
                    :loading="departmentLoading"
                >
                    <el-option 
                        v-for="dept in departmentOptions"
                        :key="dept.department_id"
                        :label="dept.department_name"
                        :value="dept.department_id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="仓库主管:" prop="userId">
                <el-select 
                    v-model="whform.userId" 
                    placeholder="请选择"
                    style="width: 190px"
                    :loading="userLoading"
                    filterable
                    clearable
                >
                    <el-option 
                        v-for="user in userOptions"
                        :key="user.user_id"
                        :label="user.user_name"
                        :value="user.user_id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="Reset">重置</el-button>
                <el-button type="success" @click="fetchWarehouses">查询</el-button>
                <el-button @click="showAdvancedSearch">高级查询</el-button>
            </el-form-item>
        </el-form>
        <div style="text-align: left;">
            <el-button type="success" @click="showAddDrawer">添加</el-button>
            <el-button @click="handleBatchDelete">删除</el-button>
            <el-button type="warning" @click="LockWarehouse">锁定</el-button>
            <el-button type="warning" @click="UnlockWarehouse">解锁</el-button>
            <el-button @click="Export">导出</el-button>
            <el-upload
                ref="importUpload"
                style="display: inline-block; margin-left: 10px;"
                :auto-upload="false"
                :on-change="handleFileChange"
                :show-file-list="false"
                accept=".xlsx,.xls"
            >
                <el-button :loading="importLoading">导入</el-button>
            </el-upload>
        </div>

        <p></p>
        <!--表格-->
        <el-table :data="whdata" stripe style="width: 100%" @selection-change="SelectChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="wh_code" label="仓库编号" width="140">
            <template #default="scope">
                <el-link style="color: darkseagreen;" @click="viewDetail(scope.row.wh_id)" :underline="false">{{ scope.row.wh_code }}</el-link>
            </template>
            </el-table-column>
            <el-table-column prop="wh_name" label="仓库名称" width="150"></el-table-column>
            <el-table-column prop="wh_capacity" label="仓库容量/m3" width="120"></el-table-column>
            <el-table-column prop="wh_address" label="仓库地址" width="200"></el-table-column>
            <el-table-column prop="wh_depName" label="库管部门" width="150"></el-table-column>
            <el-table-column prop="wh_userName" label="仓库主管" width="120"></el-table-column>
            <el-table-column prop="wh_slot_num" label="库位数量" width="100"></el-table-column>
            <el-table-column prop="is_lock" label="是否锁定" width="100"></el-table-column>
            <el-table-column prop="create_name" label="操作人" width="120"></el-table-column>
            <el-table-column prop="create_time" label="操作时间" width="180"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
                <el-button type="success" size="small" text @click="showEditDrawer(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" text @click="ShowDelete(scope.row.wh_id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination 
            :page-size="pagination.pageSize" 
            :pager-count="11" 
            layout="prev, pager, next, jumper" 
            :total="pagination.total"
            v-model:current-page="pagination.currentPage"
            @current-change="handlePageChange" 
            style="float:right;margin-top:20px">
        </el-pagination>

        <!-- 高级查询抽屉 -->
        <el-drawer v-model="advancedForm.showAdvancedDrawer" title="高级查询" direction="rtl" size="30%">
            <div style="padding: 20px;">
                <el-form label-width="120px" label-position="top">
                    <el-row :gutter="24">
                        <!-- 左列 -->
                        <el-col :span="12">
                            <el-form-item label="仓库编号">
                                <el-input placeholder="请输入仓库编号" v-model="advancedForm.whCode"/>
                            </el-form-item>
                            <el-form-item label="仓库名称">
                                <el-input placeholder="请输入仓库名称" v-model="advancedForm.whName"/>
                            </el-form-item>
                            <el-form-item label="仓库状态">
                                <el-select placeholder="请选择" v-model="advancedForm.status">
                                    <el-option label="启用" value="0" />
                                    <el-option label="停用" value="1" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="库管部门">
                                <el-select 
                                    v-model="advancedForm.depId" 
                                    placeholder="请选择"
                                    :loading="departmentLoading"
                                    filterable
                                    clearable
                                >
                                    <el-option 
                                        v-for="dept in departmentOptions"
                                        :key="dept.department_id"
                                        :label="dept.department_name"
                                        :value="dept.department_id"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 右列 -->
                        <el-col :span="12">
                            <el-form-item label="仓库主管">
                                <el-select 
                                    v-model="advancedForm.userId" 
                                    placeholder="请选择"
                                    :loading="userLoading"
                                    filterable
                                    clearable
                                >
                                    <el-option 
                                        v-for="user in userOptions"
                                        :key="user.user_id"
                                        :label="user.user_name"
                                        :value="user.user_id"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="仓库容量(m³)">
                                <div style="display: flex; align-items: center;">
                                    <el-input-number 
                                        placeholder="最小值" 
                                        v-model="advancedForm.minCapacity" 
                                        :min="0"
                                        controls-position="right"
                                        style="width: 100%"
                                    />
                                    <span style="margin: 0 8px;">~</span>
                                    <el-input-number 
                                        placeholder="最大值" 
                                        v-model="advancedForm.maxCapacity" 
                                        :min="0"
                                        controls-position="right"
                                        style="width: 100%"
                                    />
                                </div>
                            </el-form-item>
                            <el-form-item label="库位数量">
                                <div style="display: flex; align-items: center;">
                                    <el-input-number 
                                        placeholder="最小值" 
                                        v-model="advancedForm.minSlotNum" 
                                        :min="0"
                                        controls-position="right"
                                        style="width: 100%"
                                    />
                                    <span style="margin: 0 8px;">~</span>
                                    <el-input-number 
                                        placeholder="最大值" 
                                        v-model="advancedForm.maxSlotNum" 
                                        :min="0"
                                        controls-position="right"
                                        style="width: 100%"
                                    />
                                </div>
                            </el-form-item>
                            <el-form-item label="操作时间范围">
                                <el-date-picker 
                                    v-model="advancedForm.timeRange" 
                                    type="datetimerange"
                                    range-separator="To"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="resetAdvancedSearch">重置</el-button>
                    <el-button @click="advancedForm.showAdvancedDrawer = false">关闭</el-button>
                    <el-button type="primary" @click="handleAdvancedSearch">确定</el-button>
                </div>
            </template>
        </el-drawer>

        <!-- 删除模态框 -->
        <el-dialog v-model="DeleteialogVisible" width="400" style="text-align: left;" align-center>
            <span>确定删除吗?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="DeleteialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmDelete">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted } from 'vue';
import http from '../auth/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import * as XLSX from 'xlsx';

export default {
    setup() {
        const router = useRouter();
        const user = JSON.parse(sessionStorage.getItem("user"));

        // 日期格式化
        const formatDateTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        };

        // 选中数据
        const selectdata = ref([]);
        const selectedRows = ref([]);
        
        const SelectChange = (val) => {
            selectdata.value = val;
            selectedRows.value = val;
        };

        // 导出功能
        const Export = () => {
            if (selectdata.value.length === 0) {
                ElMessage.warning('请选择要导出的数据');
                return;
            }
            
            try {
                const wb = XLSX.utils.book_new();
                const excelData = selectdata.value.map((row) => ({
                    "序号": row.wh_id,
                    "仓库编号": row.wh_code,
                    "仓库名称": row.wh_name,
                    "仓库容量/m3": row.wh_capacity,
                    "仓库地址": row.wh_address,
                    "库管部门": row.wh_depName,
                    "仓库主管": row.wh_userName,
                    "库位数量": row.wh_slot_num,
                    "仓库状态": row.wh_status === 0 ? '正常' : '停用',
                    "操作人": row.create_name,
                    "操作时间": formatDateTime(new Date(row.create_time))
                }));
                
                const ws = XLSX.utils.json_to_sheet(excelData);
                XLSX.utils.book_append_sheet(wb, ws, "仓库信息");
                XLSX.writeFile(wb, `仓库信息_${new Date().toISOString().slice(0, 10)}.xlsx`);
            } catch (error) {
                console.error('导出失败:', error);
                ElMessage.error('导出失败');
            }
        };

        // 导入功能
        const importLoading = ref(false);
        const importUpload = ref(null);

        const handleFileChange = async (file) => {
            if (!file?.raw) return;
            
            const isExcel = /\.(xlsx|xls)$/.test(file.name.toLowerCase());
            if (!isExcel) {
                ElMessage.warning('请上传Excel文件(.xlsx或.xls)');
                return;
            }

            importLoading.value = true;
            
            try {
                const formData = new FormData();
                formData.append('file', file.raw);
                
                const response = await http.post('/Warehouse/ImportWarehouses', formData, {
                    headers: { 'Content-Type': 'multipart/form-data' },
                    timeout: 3600000
                });
                
                if (response.data.successCount > 0) {
                    ElMessage.success(`成功导入 ${response.data.successCount} 条数据`);
                }
                
                if (response.data.errors?.length > 0) {
                    // 显示前10条错误，避免过多
                    const errorMessages = response.data.errors.slice(0, 10).join('\n');
                    if (response.data.errors.length > 10) {
                        errorMessages += `\n...还有 ${response.data.errors.length - 10} 条错误未显示`;
                    }
                    ElMessageBox.alert(errorMessages, '导入错误', {
                        dangerouslyUseHTMLString: true,
                        showConfirmButton: false,
                        showClose: false,
                        customClass: 'error-message-box'
                    });
                }
                
                fetchWarehouses();
            } catch (error) {
                let errorMsg = '导入失败';
                if (error.response) {
                    errorMsg = error.response.data?.message || errorMsg;
                } else if (error.message) {
                    errorMsg = error.message;
                }
                ElMessage.error(errorMsg);
            } finally {
                importLoading.value = false;
                if (importUpload.value) {
                    importUpload.value.clearFiles();
                }
            }
        };

        // 表单数据
        const whformRef = ref(null);
        const whform = reactive({
            status: '',
            whname: '',
            depId: '',  // 存储部门ID
            userId: ''  // 存储用户ID
        });

        // 表格数据
        const whdata = ref([]);
        
        // 分页配置
        const pagination = reactive({
            currentPage: 1,
            pageSize: 10,
            total: 0
        });

        // 部门和用户选项
        const departmentOptions = ref([]);
        const userOptions = ref([]);

        // 加载状态控制
        const departmentLoading = ref(false);
        const userLoading = ref(false);

        // 获取部门列表
        const fetchDepartments = async () => {
            departmentLoading.value = true;
            try {
                const response = await http.get("/Department/GetDepartments");
                departmentOptions.value = response.data || [];
            } catch (error) {
                console.error('获取部门数据失败:', error);
                ElMessage.error('获取部门数据失败');
            } finally {
                departmentLoading.value = false;
            }
        };

        // 获取用户列表
        const fetchUsers = async () => {
            userLoading.value = true;
            try {
                const res = await http.get('/Warehouse/GetAllUsers');
                userOptions.value = res.data.map(item => ({
                    user_id: item.user_id,
                    user_name: item.user_name
                }));
            } catch (error) {
                console.error('获取用户列表失败:', error);
                ElMessage.error('获取用户列表失败');
            } finally {
                userLoading.value = false;
            }
        };

        // 部门选择变化时触发
        const handleDepartmentChange = (depId) => {
            // 可以在这里处理部门变化后的逻辑
            console.log('选择的部门ID:', depId);
        };

        // 添加仓库
        const showAddDrawer = () => {
            router.push('warehouseadd');
        };

        // 重置
        const Reset = () => {
            whformRef.value?.resetFields();
            pagination.currentPage = 1;
            fetchWarehouses();
        };

        // 查询数据
        const fetchWarehouses = () => {
            // 根据部门ID和用户ID查询，而不是名称
            const depName = departmentOptions.value.find(d => d.department_id === whform.depId)?.department_name || '';
            const userName = userOptions.value.find(u => u.user_id === whform.userId)?.user_name || '';
            
            http.get("/Warehouse/GetWarehouse", {
                params: {
                    status: whform.status,
                    whname: whform.whname,
                    whdepname: depName,
                    whusername: userName,
                    pageIndex: pagination.currentPage,
                    pageSize: pagination.pageSize
                }
            }).then((res) => {
                pagination.total = res.data.rows;
                if (res.data.list.length === 0) {
                    ElMessage.warning('没有相关数据');
                }
                whdata.value = res.data.list.map((item) => ({
                    ...item,
                    is_lock: item.is_lock === 0 ? '未锁定' : '已锁定',
                    create_time: formatDateTime(new Date(item.create_time)),
                }));
            }).catch((err) => {
                console.error('获取数据失败:', err);
                ElMessage.error('获取数据失败');
            });
        };

        // 分页变化
        const handlePageChange = (page) => {
            pagination.currentPage = page;
            fetchWarehouses();
        };
        
        // 删除相关
        const DeleteialogVisible = ref(false);
        const busid = ref(null);

        const formatStatus = (row) => {
            return row.wh_status === 0 ? '正常' : '停用';
        };

        const ShowDelete = (id) => {
            busid.value = id;
            DeleteialogVisible.value = true;
        };
 
        const confirmDelete = async () => {
  try {
    // 检查仓库是否有货品
    const checkResponse = await http.get(`/Stock/GetStockwhid`, {
      params: { whid: busid.value } // 使用仓库 ID
    });

    console.log(checkResponse.data);
    if (checkResponse.data.length>0) {
      ElMessageBox.alert(
        '该仓库下有货品，谨慎删除！',
        '警告',
        { type: 'warning' }
      );
      return; // 终止删除操作
    }

    // 如果没有货品，继续删除
    const res = await http.put('/Warehouse/DeleteWarehouse?id='+busid.value);

    if (res.data > 0) {
      ElMessage.success('删除成功');
      DeleteialogVisible.value = false;
      busid.value = null;
      await fetchWarehouses();
    } else {
      ElMessageBox.alert(
        res.data?.message || '删除失败，后端未返回详细信息',
        '删除失败',
        { type: 'error' }
      );
    }
  } catch (error) {
    console.error('删除仓库失败:', error);
    ElMessageBox.alert(
      error.response?.data?.message || error.message || '删除仓库失败',
      '删除失败',
      { type: 'error' }
    );
  }
};

        // 批量删除
        const handleBatchDelete = async () => {
            if (selectedRows.value.length === 0) {
                ElMessage.warning('请先选择要删除的仓库');
                return;
            }

            const idsToDelete = selectedRows.value.map(row => row.wh_id);

            try {
                await ElMessageBox.confirm(
                    `确定要删除选中的 ${idsToDelete.length} 个仓库吗？`,
                    '警告',
                    { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
                );

                let successCount = 0;
                for (const id of idsToDelete) {
                    const res = await http.put(`/Warehouse/DeleteWarehouse?id=${id}`);
                    if (res.data > 0) successCount++;
                }

                if (successCount > 0) {
                    ElMessage.success(`成功删除 ${successCount} 个仓库`);
                    await fetchWarehouses();
                } else {
                    ElMessage.error('删除失败，请重试');
                }
            } catch (err) {
                if (err !== 'cancel') {
                    console.error('批量删除出错:', err);
                    ElMessage.error('操作中断');
                }
            }
        };

        // 高级查询相关
        const showAdvancedDrawer = ref(false);
        const advancedForm = reactive({
            showAdvancedDrawer: false,
            whCode: '',
            whName: '',
            status: '',
            depId: '', // 存储部门ID
            userId: '', // 存储用户ID
            minCapacity: null,
            maxCapacity: null,
            minSlotNum: null,
            maxSlotNum: null,
            timeRange: []
        });
 
        // 点击高级查询按钮
        const showAdvancedSearch = () => {
            advancedForm.showAdvancedDrawer = true;
        };
 
        // 重置高级查询
        const resetAdvancedSearch = () => {
            Object.assign(advancedForm, {
                whCode: '',
                whName: '',
                status: '',
                depId: '',
                userId: '',
                minCapacity: null,
                maxCapacity: null,
                minSlotNum: null,
                maxSlotNum: null,
                timeRange: []
            });
        };
 
        // 高级查询     
        const handleAdvancedSearch = () => {
            // 根据部门ID和用户ID查询
            const depName = departmentOptions.value.find(d => d.department_id === advancedForm.depId)?.department_name || '';
            const userName = userOptions.value.find(u => u.user_id === advancedForm.userId)?.user_name || '';
 
            // 构建查询参数
            const params = {
                code: advancedForm.whCode,
                name: advancedForm.whName,
                status: advancedForm.status,
                whdepname: depName,
                whusername: userName,
                minCapacity: advancedForm.minCapacity || undefined,
                maxCapacity: advancedForm.maxCapacity || undefined,
                minNum: advancedForm.minSlotNum || undefined,
                maxNum: advancedForm.maxSlotNum || undefined,
                CurrentPage: 1,
                pageSize: pagination.pageSize
            };
 
            // 处理时间范围
            if (advancedForm.timeRange && advancedForm.timeRange.length === 2) {
                params.startTime = formatDateTime(new Date(advancedForm.timeRange[0]));
                params.endTime = formatDateTime(new Date(advancedForm.timeRange[1]));
            }
 
            // 执行查询
            http.get("/Warehouse/GetvancedWarehouse", { params })
                .then((res) => {
                    pagination.total = res.data.rows;
                    if (res.data.list.length === 0) {
                        ElMessage.warning('没有相关数据');
                    }
                    whdata.value = res.data.list.map((item) => ({
                        ...item,
                        is_lock: item.is_lock === 0 ? '未锁定' : '已锁定',
                        create_time: formatDateTime(new Date(item.create_time)),
                    }));
                    advancedForm.showAdvancedDrawer = false;
                })
                .catch((err) => {
                    console.error('高级查询失败:', err);
                    ElMessage.error('高级查询失败');
                });
        };

        // 详情和编辑
        const viewDetail = (whId) => {
            router.push({ name: 'WarehouseDetail', query: { id: whId } });
        };

        const showEditDrawer = (row) => {
            router.push({ path: 'warehouseupdate', query: { id: row.wh_id, from: 'list' } });
        };


        //锁定仓库
        function LockWarehouse(){
            //判断是否有选中的数据
            if(selectdata.value.length === 0){
                ElMessage.warning('请先选择要锁定的仓库');
                return;
            }
            
            // 显示确认对话框，告知用户将锁定多少个仓库
            ElMessageBox.confirm(
                `确定要锁定选中的 ${selectdata.value.length} 个仓库吗？`,
                '提示',
                { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
            ).then(async () => {
                try {
                    const idsToLock = selectdata.value.map(row => row.wh_id);
                    let successCount = 0;
                    
                    // 循环处理每个仓库的锁定
                    for (const id of idsToLock) {
                        const res = await http.put(`/Warehouse/LockWarehouse?whid=${id}&islock=1`);
                        if (res.data > 0) successCount++;
                    }
                    
                    if (successCount > 0) {
                        ElMessage.success(`成功锁定 ${successCount} 个仓库`);
                        await fetchWarehouses();
                    } else {
                        ElMessage.error('锁定失败，请重试');
                    }
                } catch (err) {
                    console.error('锁定出错:', err);
                    ElMessage.error('锁定失败');
                }
            }).catch(() => {
                // 用户取消操作
            });
        }

        //解锁仓库
        function UnlockWarehouse(){
            //判断是否有选中的数据
            if(selectdata.value.length === 0){
                ElMessage.warning('请先选择要解锁的仓库');
                return;
            }
            //显示确认对话框，告知用户将解锁多少个仓库
            ElMessageBox.confirm(
                `确定要解锁选中的 ${selectdata.value.length} 个仓库吗？`,
                '提示',
                { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
            ).then(async () => {
                try {
                    const idsToUnlock = selectdata.value.map(row => row.wh_id);
                    let successCount = 0;
                    
                    // 循环处理每个仓库的解锁
                    for (const id of idsToUnlock) {
                        const res = await http.put(`/Warehouse/LockWarehouse?whid=${id}&islock=0`);
                        if (res.data > 0) successCount++;
                    }
                    if (successCount > 0) {
                        ElMessage.success(`成功解锁 ${successCount} 个仓库`);
                        fetchWarehouses();
                    } else {
                        ElMessage.error('解锁失败，请重试');
                    }
                } catch (err) {
                    console.error('解锁出错:', err);
                    ElMessage.error('解锁失败');
                }
            });
        }

        // 初始化加载数据
        onMounted(() => {
            fetchDepartments(); // 加载部门数据
            fetchUsers();       // 加载用户数据
            fetchWarehouses();  // 加载仓库数据
        });

        return {
            whformRef,
            whform,
            whdata,
            pagination,
            departmentOptions,
            userOptions,
            departmentLoading,
            userLoading,
            selectdata,
            selectedRows,
            importLoading,
            importUpload,
            DeleteialogVisible,
            busid,
            SelectChange,
            Export,
            handleFileChange,
            showAddDrawer,
            Reset,
            fetchWarehouses,
            handlePageChange,
            formatStatus,
            ShowDelete,
            confirmDelete,
            handleBatchDelete,
            viewDetail,
            showEditDrawer,
            advancedForm,
            showAdvancedSearch,
            resetAdvancedSearch,
            handleAdvancedSearch,
            showAdvancedDrawer,
            fetchDepartments,
            fetchUsers,
            handleDepartmentChange,
            LockWarehouse,
            UnlockWarehouse
        };
    }
}
</script>

<style scoped>
/* 保留原有样式 */
.panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    padding: 10px;
    background: #f9fbfd;
    text-align: left;
    flex: 1;
    overflow-y: auto;
}

.panel-body input {
    width: 100%;
    padding: 6px 5px;
    border: 1px solid #d1d8e0;
    border-radius: 4px;
    font-size: 14px;
}

.panel-body input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.advanced-panel {
    position: fixed;
    top: 0;
    right: -1000px;
    width: 600px;
    height: 700px;
    background: white;
    z-index: 1001;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
}

.panel-footer {
    padding: 12px 15px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* 错误消息框样式 */
.error-message-box {
    max-width: 800px;
    white-space: pre-line;
}

.error-message-box .el-message-box__content {
    max-height: 400px;
    overflow-y: auto;
}
</style>